<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>AIGC-AppDemo</title>
        <style>
            /* 基本样式 */
            body {
                font-family: "NSimSun"; /* 只使用新宋体 */
                margin: 0;
                padding: 0;
                background-color: #f2f2f2;
            }

            /* Tab样式 */
            .tab-container {
                display: flex;
                justify-content: center;
                background-color: #fff;
                border-bottom: 1px solid #ddd;
            }

            .tab {
                padding: 15px 20px;
                cursor: pointer;
                color: #888;
                font-size: 20px;
                font-weight: bold;
                transition: color 0.3s, border-bottom 0.3s;
                font-family: "NSimSun"; /* 确保tab的字体也是新宋体 */
            }

            .tab.active {
                color: #007bff;
                font-weight: bold;
                border-bottom: 2px solid #007bff;
            }

            /* 内容显示区域 */
            .content-container {
                width: 100%;
                height: 1000px;
                text-align: center;
                font-family: "NSimSun"; /* 确保内容区的字体也是新宋体 */
            }

            iframe {
                width: 100%;
                height: 100%;
                border: none;
            }
        </style>
    </head>
    <body>
        <!-- Tab导航 -->
        <div class="tab-container">
            <div class="tab active" data-url="faceSwap.html">视频换脸</div>
            <div class="tab" data-url="imageFaceSwap.html">图片换脸</div>
            <div class="tab" data-url="ttsDemo.html">声音克隆</div>
            <div class="tab" data-url="imagematch/imageMatch.html">文物比对</div>
        </div>

        <!-- 内容显示区域 -->
        <div class="content-container">
            <iframe id="iframe-content" src="faceSwap.html"></iframe>
        </div>

        <script>
            // 配置密码和存储键名
            const correctPassword = "fangwenmima"; // 替换为你的密码
            const storageKey = "page_access_granted";

            // 2. 检查是否已验证过（刷新页面时会先执行这里）
            function checkAuth() {
                // 从本地存储获取状态
                const isGranted = localStorage.getItem(storageKey);
                // 如果已验证过，直接返回true
                return isGranted === "true";
            }

            // 验证密码并记录状态
            function verifyPassword() {
                const userInput = prompt("请输入访问密码：", "");
                if (userInput === correctPassword) {
                    // 验证通过：在本地存储标记为“已通过”
                    localStorage.setItem(storageKey, "true");
                    return true;
                } else {
                    // 验证失败：清空存储（防止残留状态）
                    localStorage.removeItem(storageKey);
                    return false;
                }
            }

            // 页面加载时执行验证流程
            window.onload = function() {
                // 先检查是否已验证过，没验证过再弹密码框
                if (!checkAuth()) {
                    const isVerified = verifyPassword();
                    if (!isVerified) {
                        // 密码错误：显示提示并阻止访问
                        document.body.innerHTML = `
                    <div style="text-align: center; margin-top: 50px; color: red; font-size: 18px;">
                        密码错误，无法访问页面！
                    </div>
                `;
                    }
                }
                // 已验证过则什么都不做，页面正常显示
            };
            
            // 获取Tab和iframe元素
            const tabs = document.querySelectorAll(".tab");
            const iframe = document.getElementById("iframe-content");

            // 添加点击事件切换Tab
            tabs.forEach((tab) => {
                tab.addEventListener("click", () => {
                    // 移除所有Tab的激活状态
                    tabs.forEach((t) => t.classList.remove("active"));

                    // 激活当前Tab
                    tab.classList.add("active");

                    // 更换iframe的src加载对应页面
                    const url = tab.dataset.url;
                    iframe.src = url;
                });
            });
        </script>
    </body>
</html>
